<template>
  <div class="uploadImage">
    <!-- 通过的上传图片组件包括图片裁剪 -->
    <el-upload v-if="!imgUrl || imgUrl===''" class="avatar-uploader" :http-request="uploadImg" action="#" :before-upload="fileSizeLimit" :on-remove="removeImg" :show-file-list="false">
      <!-- 默认的样式 -->
      <i v-if="!customStyle && (imgUrl == '' || !imgUrl)" class="el-icon-plus avatar-uploader-icon"></i>
      <div v-if="!customStyle && (imgUrl == '' || !imgUrl)" slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>

    <div v-if="imgUrl && imgUrl !== ''" class="imageLoad">
      <img :src="imgUrl" class="avatar">
      <transition name="el-fade-in">
        <div>

        </div>
      </transition>
    </div>
    <!-- <imageCropper :show.sync="cropperVisible" :file="file" @confirm="onConfirm" /> -->
  </div>
</template>

<script type="text/javascript">
import { uploadImageBefore } from '@/utils/index'
// import imageCropper from './imageCorpper.vue'
export default {
  components: {
    // imageCropper
  },
  props: ['tip', 'type', 'url', 'customStyle'],
  data() {
    return {
      imgUrl: '',
      cropperVisible: false,
      file: {
        url: '',
        name: ''
      },
      autoCropWidth: '400px',
      autoCropHeight: '400px'
    }
  },
  watch: {
    url(newVal, oldVal) {
      console.log(newVal, 'newVal')
      this.imgUrl = newVal
    }
  },
  mounted() {
    if (this.url && this.url != '') {
      this.imgUrl = this.url
    }
  },
  methods: {
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    // 不需要裁剪图片
    async uploadImg(params) {
      const result = await this.uploading(params.file)
      console.log(result, 'result')
      this.imgUrl = result.host + '/' + result.finallName
      this.$emit('resultUpload', this.imgUrl, this.type)
    },
    // 需要裁剪图片
    // async uploadImg(params) {
    //   if (params.file) {
    //     this.file.url = await this.getBase64(params.file)
    //     this.file.name = params.file.name
    //     this.cropperVisible = true
    //   }
    // },
    // 上传之前
    fileSizeLimit(file) {
      return uploadImageBefore(file, this)
    },
    // 删除前
    removeImg() {},
    // 裁剪完成后返回图片地址
    async onConfirm(file) {
      const uploadConfig = {
        dir: '/zhangsheng/service/avatars/'
      }
      this.cropperVisible = false
      const result = await this.uploading(file, uploadConfig)
      console.log(result, 'result')
      this.imgUrl = result.host + '/' + result.finallName
      this.$emit('resultUpload', this.imgUrl, this.type)
    }
    // 上传
  }
}
</script>
  <style lang="scss" scoped>
  .uploadImage {
    .imageLoad{
      cursor: pointer;
      position: relative;
      background: #FFFFFF;
      width: 100px;
      height: 100px;
      border: 1px solid #D9D9D9;
      border-radius: 5px;
    }
    ::v-deep .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    ::v-deep .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    ::v-deep .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    ::v-deep .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
    ::v-deep .el-upload__tip {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
  }
  </style>
